import React, { Suspense } from "react";
import { Spin } from "antd";
// import { withActivation } from "react-activation";

/**
 * @description 路由懒加载
 * @param {Element} moduleFn 组件模块
 * @returns element
 */
const lazyLoad = (
	moduleFn: () => Promise<{ default: any }>
	// isCache: boolean = false
	// name: string = "test"
): React.ReactNode => {
	// 异步加载组件
	const LazyComponent = React.lazy(moduleFn);

	// 使用 withActivation 高阶组件包裹异步组件以实现缓存
	// const CachedLazyComponent = isCache ? withActivation(LazyComponent) : LazyComponent;

	return (
		<Suspense
			fallback={
				<Spin
					size="large"
					style={{
						display: "flex",
						alignItems: "center",
						justifyContent: "center",
						height: "100%"
					}}
				/>
			}
		>
			<LazyComponent />
			{/* cacheKey全局唯一，when=true时缓存 */}
			{/* {isCache ? (
				<KeepAlive cacheKey={name} when={isCache} name={name}>
					<Component />
				</KeepAlive>
			) : (
				<Component />
			)} */}
		</Suspense>
	);
};

export default lazyLoad;
